<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<u-icon name="arrow-left" color="#333" size="18"></u-icon>
				</view>
				<view class="nav-title">选择收货地址</view>
				<view class="nav-right"></view>
			</view>
		</view>
		
		<!-- 主内容区域 -->
		<view class="main-content" :style="{paddingTop: (statusBarHeight + 44) + 'px'}">
			<!-- 地址列表 -->
			<view class="address-list" v-if="addressList.length > 0">
			<view
				class="address-item"
				v-for="item in addressList"
				:key="item.addressId"
				@click="selectAddress(item)"
			>
				<view class="address-info">
					<view class="user-info">
						<text class="name">{{item.addressName}}</text>
						<text class="phone">{{item.addressPhone}}</text>
					</view>
					<view class="address-detail">{{item.addressInfo}} {{item.addressCommunity}}</view>
					<view class="default-tag" v-if="item.addressDefault == 1">
						<u-icon name="checkmark-circle-fill" color="#67c23a" size="22"></u-icon>
						<text style="margin-left: 6rpx; color: #67c23a;">默认地址</text>
					</view>
				</view>
				<view class="select-icon">
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
		</view>
		
					<!-- 空状态 -->
			<view class="empty-state" v-else>
				<image class="empty-icon" src="http://121.36.197.175:19000/test/location-empty.png" mode="aspectFit"></image>
				<text class="empty-text">暂无收货地址</text>
				<view class="empty-tip">
					<text>请先到个人中心添加收货地址</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/util/request.js'

export default {
	data() {
		return {
			addressList: [],
			statusBarHeight: 0
		}
	},
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight;
		
		this.getAddressList()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		async getAddressList() {
			try {
				const userInfo = uni.getStorageSync('userInfo')
				const res = await request({
					url: `/user-service/address/list?userId=${userInfo.userId}`,
					method: 'GET'
				})
				
				this.addressList = res.data.list || []
				
			} catch (err) {
				console.error('获取地址列表失败:', err)
				this.addressList = []
			}
		},
		selectAddress(item) {
			// 选择地址，传递给上一页
			const pages = getCurrentPages()
			const prevPage = pages[pages.length - 2]
			
			if (prevPage) {
				prevPage.$vm.setSelectedAddress(item)
			}
			
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f8f8f8;
}

/* 自定义导航栏 */
.nav-bar {
	background-color: #ffffff;
	border-bottom: 1rpx solid #f0f0f0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

.status-bar {
	width: 100%;
	background-color: #ffffff;
}

.nav-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding: 0 30rpx;
	background-color: #ffffff;
}

.nav-left {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.nav-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	text-align: center;
	flex: 1;
}

.nav-right {
	width: 60rpx;
	flex-shrink: 0;
}

/* 主内容区域 */
.main-content {
	/* padding-top 通过内联样式动态设置，包含状态栏高度 */
}

.address-list {
	padding: 20rpx;
	
	.address-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		position: relative;
		
		&:active {
			background-color: #f5f5f5;
		}
		
		.address-info {
			flex: 1;
			padding-right: 30rpx;
			
			.user-info {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;
				
				.name {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
					margin-right: 20rpx;
				}
				
				.phone {
					font-size: 28rpx;
					color: #666;
				}
			}
			
			.address-detail {
				font-size: 28rpx;
				color: #666;
				line-height: 1.5;
				margin-bottom: 10rpx;
			}
			
			.default-tag {
				display: flex;
				align-items: center;
				
				text {
					font-size: 24rpx;
					color: #67c23a;
				}
			}
		}
		
		.select-icon {
			flex-shrink: 0;
		}
	}
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
	
	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 20rpx;
	}
	
	.empty-tip {
		font-size: 24rpx;
		color: #ccc;
	}
}
</style> 